<template>
    <div id="create-edit-container">
        <el-dialog
                :visible.sync="stateManager.editDialogVisible"
                :title="modalTitle"
                width="48%"
                :before-close="closeDialog"
                top='15px'>
            <el-form ref="model" :model="model" :rules="ruleValidate">
                <!--姓名和指向类型-->
                <el-row type="flex">
                    <el-col :span="10" :offset="1">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="model.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="用户权限" prop="permissions">
                            <el-select v-model="model.permissions" style="width: 100%" multiple placeholder="请选择用户权限">
                                <el-option
                                        v-for="item in rolesList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <template slot="footer">
                <el-row type="flex" :gutter="10">
                    <el-col :span="24">
                        <div class="pull-right">
                            <el-button type="ghost" @click="closeDialog"  :loading="stateManager.buttonLoading" size="small">取消</el-button>
                            <el-button type="primary" @click="saveModel"   :loading="stateManager.buttonLoading" size="small">确定</el-button>
                        </div>
                    </el-col>
                </el-row>
            </template>
        </el-dialog>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    props: {
      stateManager: {
        type: Object
      }
    },
    data:  function() {
      return {
        model: this.$modelDataSource({
          url:'/api/admin',
          dataKey: 'model',
          attributes: {
            id: 0,
            name: '',
            permissions:[]
          }
        }),
        isLoading: false,
        ruleValidate: {
          name: [
            {required: true, message: '姓名不能为空', trigger: 'blur'}
          ],
          permissions: [
            {required: true, message: '权限不能为空', trigger: 'blur'},
            {type:'array', trigger: 'blur'},
          ],
        }
      }
    },
    methods: {
      closeDialog: function () {
        if(this.stateManager.buttonLoading){
          return false
        }
        this.stateManager.editDialogVisible = false
        this.stateManager.listLoading = false
        this.model.reset()
        this.$refs['model'].resetFields()
        this.stateManager.editModelId = 0
      },
      saveModel: function () {
        let self = this
        self.stateManager.buttonLoading = true
        self.$refs['model'].validate((valid) => {
          if (valid) {
            console.log('表单验证通过')
            self.isLoading = false
            self.model.save(
              function () {
                self.$message.success('保存成功')
                self.stateManager.refreshList = true
                self.stateManager.buttonLoading = false
                self.closeDialog()
              }, function (errors) {
                self.$message.error(errors.response.data.errors.name[0])
                self.stateManager.buttonLoading = false
                self.isLoading = false
              })
          } else {
            console.log('表单验证失败')
          }
        })
      },
    },
    computed: {
      ...mapGetters([
          'rolesList'
      ]),
      modalTitle () {
        switch (this.stateManager.editModelId) {
          case 0:
            return '添加后台人员信息'
            break
          default:
            return '修改后台人员信息'
        }
      },
    },
    watch: {
      'stateManager.editModelId': function (newValue) {
        let self = this
        this.model.fetch(newValue, {}, function () {
          self.stateManager.editDialogVisible = true
        }, function () {
          self.stateManager.listLoading = false
        })
      }
    }
  }
</script>
